<template>
  <router-view />
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* :root {
  --bg: #e2dbd0;
  --block-bg: #fafdd6;
  --canvas-bg: #d2cbc0;
  --el-fill-color-blank: var(--bg);
  --fg: #5a2720;
  --primary: #185864ff;

  --primary-with-opacity: #185864aa;

  --highlight: #f9a647;
} */

:root {
  --bg: #f9ebc8;
  --canvas-bg: #fefbe7;
  --fg: #354259;
  --stroke-color: #f9a647;
  /* --primary: #465d7d; */
  --primary: #566d7d;
  --block-bg: #dae5d0;
  --border: #fefbe7;
  --primary-with-opacity: #364d6daa;

  --highlight: #dae5d0;
  --el-fill-color-blank: var(--bg);
}

:root {
  --el-border-color-lighter: var(--border);
  --el-text-color-primary: var(--fg);
  --el-text-color-regular: var(--fg);

  --el-color-primary: var(--primary);
  --el-bg-color: var(--bg);
  --el-border-color-lighter: var(--border);
}

.el-popper .is-light {
  background: var(--bg);
}

.el-button {
  --el-button-hover-bg-color: var(--highlight);
}

.el-button--primary {
  --el-button-text-color: var(--bg);
  --el-button-hover-bg-color: var(--primary-with-opacity);
  --el-button-hover-border-color: var(--primary-with-opacity);
}

.el-badge__content{
  z-index: 1000;
}

body {
  margin: 0px;
  background-color: var(--bg);
}
</style>
